<!doctype html>



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>






<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
    
  
  <link href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






  

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="/lh706.github.io/css/main.css?v=5.1.1" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="总结,HTML,CSS," />








  <link rel="shortcut icon" type="image/x-icon" href="/lh706.github.io/favicon.ico?v=5.1.1" />






<meta name="description" content="目录结构123456789101112131415docsrc    css    img    js        404.html        index.html        robots.txt        humans.txt        favicon.icon.editorconfig---IDE配置代码风格文件.gitignore---配置git忽略文件LECENSE.tx">
<meta name="keywords" content="总结,HTML,CSS">
<meta property="og:type" content="article">
<meta property="og:title" content="html-css相关">
<meta property="og:url" content="https://lh706.github.io/lh706.github.io/2017/05/20/html-css相关/index.html">
<meta property="og:site_name" content="Albert的blog">
<meta property="og:description" content="目录结构123456789101112131415docsrc    css    img    js        404.html        index.html        robots.txt        humans.txt        favicon.icon.editorconfig---IDE配置代码风格文件.gitignore---配置git忽略文件LECENSE.tx">
<meta property="og:image" content="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071004.png">
<meta property="og:updated_time" content="2017-05-20T07:58:50.424Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="html-css相关">
<meta name="twitter:description" content="目录结构123456789101112131415docsrc    css    img    js        404.html        index.html        robots.txt        humans.txt        favicon.icon.editorconfig---IDE配置代码风格文件.gitignore---配置git忽略文件LECENSE.tx">
<meta name="twitter:image" content="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071004.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/lh706.github.io/',
    scheme: 'Mist',
    sidebar: {"position":"right","display":"always","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://lh706.github.io/lh706.github.io/2017/05/20/html-css相关/"/>





  <title>html-css相关 | Albert的blog</title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  














  
  
    
  

  <div class="container sidebar-position-right page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/lh706.github.io/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Albert的blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description"></h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/lh706.github.io/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/lh706.github.io/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/lh706.github.io/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-tags " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://lh706.github.io/lh706.github.io/lh706.github.io/2017/05/20/html-css相关/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Albert">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/lh706.github.io/my.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Albert的blog">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">html-css相关</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-05-20T11:46:11+08:00">
                2017-05-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        <h3 id="目录结构"><a href="#目录结构" class="headerlink" title="目录结构"></a>目录结构</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">doc</div><div class="line">src</div><div class="line">    css</div><div class="line">    img</div><div class="line">    js</div><div class="line">        404.html</div><div class="line">        index.html</div><div class="line">        robots.txt</div><div class="line">        humans.txt</div><div class="line">        favicon.icon</div><div class="line">.editorconfig---IDE配置代码风格文件</div><div class="line">.gitignore---配置git忽略文件</div><div class="line">LECENSE.txt---版权声明</div><div class="line">README.md---项目简介,使用方式,相关链接</div><div class="line">CHANGELOG.md---版本更新说明</div></pre></td></tr></table></figure>
<a id="more"></a>
<h3 id="设备尺寸与分辨率"><a href="#设备尺寸与分辨率" class="headerlink" title="设备尺寸与分辨率"></a>设备尺寸与分辨率</h3><h4 id="尺寸"><a href="#尺寸" class="headerlink" title="尺寸"></a>尺寸</h4><p>物理像素–实际发光的点,在视网膜屏上会是两个物理像素组成1px;<br>px–是屏幕实际显示的一个点,浏览器默认字体是16px;<br>em–相对父元素的尺寸,在html设置font-size为62.5%后,1em=10px;如果父元素为2em,再将子元素也设置2em,则此时子元素相对于根元素为4倍;<br>rem–只相对于根元素的尺寸;</p>
<h4 id="媒体查询"><a href="#媒体查询" class="headerlink" title="媒体查询"></a>媒体查询</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">　　@media all[媒体类型] and (min-width:800px) and (orientation:landscape)&#123;...&#125;</div><div class="line">　　　返回真或假,然后决定执行&#123;...&#125;</div><div class="line">　　　媒体属性媒介:</div><div class="line">　　　width,height---视口</div><div class="line">　　　device-width/height---渲染表面/就是设备屏幕</div><div class="line">　　　orientation---设备是纵向还是横向</div></pre></td></tr></table></figure>
<h3 id="布局相关"><a href="#布局相关" class="headerlink" title="布局相关"></a>布局相关</h3><h4 id="BFC与盒模型"><a href="#BFC与盒模型" class="headerlink" title="BFC与盒模型"></a>BFC与盒模型</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">BFC</div><div class="line">一个独立渲染的盒子,内部不会影响到外面</div><div class="line">成为BFC:</div><div class="line">根元素;</div><div class="line">float不为none;(浮动的元素?);</div><div class="line">position:absolute,fixed;</div><div class="line">overflow不为visible;</div><div class="line">display:block,inline-block,table,table-cell,flex,inline-flex;</div><div class="line">属性:</div><div class="line">box垂直方向一个一个往下排列;</div><div class="line">box的margin左边会接触到包含块的左边;</div><div class="line">相邻的margin重叠;</div><div class="line">BFC区域不会与float元素区域重叠;</div><div class="line"></div><div class="line">inline</div><div class="line">padding: 上下padding会将背景扩大,但是不会占据位置,不像block会将别的元素挤走;但是左右的和block一样;</div><div class="line">margin: 上下无margin,左右有,左右方向margin,padding和块元素一样,上下方向无margin,padding会显示,但是不占据位置;</div><div class="line">width,height: 都不起作用,内部大小由内部元素撑开;</div><div class="line">无vertical-align,overflow;</div></pre></td></tr></table></figure>
<h4 id="float"><a href="#float" class="headerlink" title="float"></a>float</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">clear:左右和both</div><div class="line">a,b,c---a,c&#123;float:left&#125;,b&#123;clear:both&#125;</div><div class="line">左浮动 a 无 | 清除右浮动 b 无 | 左浮动 c 无</div></pre></td></tr></table></figure>
<h4 id="经典布局"><a href="#经典布局" class="headerlink" title="经典布局"></a>经典布局</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div></pre></td><td class="code"><pre><div class="line">圣杯布局</div><div class="line">	.container&#123;</div><div class="line">		overflow:hidden;</div><div class="line">		min-width: 500px;</div><div class="line">	&#125;</div><div class="line">	.a&#123;</div><div class="line">		padding-bottom: 10000px;</div><div class="line">		float:left;</div><div class="line">		position:relative;</div><div class="line">     	box-sizing: border-box; </div><div class="line">		margin-bottom: -10000px;</div><div class="line">	&#125;</div><div class="line">	.center&#123;</div><div class="line">		width: 100%;</div><div class="line">		background-color: blue;</div><div class="line">		padding: 0 100px 0 100px;</div><div class="line">		padding-bottom: 10000px;</div><div class="line">	&#125;</div><div class="line">	.left&#123;</div><div class="line">		background-color: red;</div><div class="line">		width: 100px;</div><div class="line">		margin-left: -100%;</div><div class="line">	&#125;</div><div class="line">	.right&#123;</div><div class="line">		width: 100px;</div><div class="line">		background-color: yellow;</div><div class="line">		margin-left: -100px;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></div><div class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"a center"</span>&gt;</span>center<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"a left"</span>&gt;</span>left<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"a right"</span>&gt;</span>right<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">通过margin-left为负,来使元素移动,再padding使中间的内容居中,再left;</div><div class="line">也可以将两侧的设置为absulute来实现margin-left效果</div><div class="line"></div><div class="line">居中</div><div class="line">1.水平居中-margin-left-right:auto;块元素-对浮动和绝对定位的无效;</div><div class="line">2.垂直居中-text-align:center;inline或inline-block;</div><div class="line">3.文字垂直居中-line-height:; 只能对于单行文字;</div><div class="line">4.块元素内的 display:table-cell;verticla-align:middle;</div><div class="line">--block margin:auto;</div><div class="line">--inline-block text-align:center;</div><div class="line">5.绝对定位 top,left:50% 然后margin-left-top:-xx ;</div><div class="line">6.绝对定位 top,right,bottom,left :0; margin:auto; 然后改变定位偏移量还可以偏移.</div><div class="line"></div><div class="line">设置等高列</div><div class="line">a&#123;width:100px;border:1px #333 solid; overflow:hidden;&#125;</div><div class="line">b,c&#123;width:50px;float:left;padding-bottom:1000px;margin-botom:-1000px;&#125;</div><div class="line">b&#123;bgcolor:red&#125;</div><div class="line">c&#123;bgcolor:blue&#125;</div><div class="line"><span class="tag">&lt;<span class="name">a</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">b</span>&gt;</span>XXXXX</div><div class="line"><span class="tag">&lt;<span class="name">c</span>&gt;</span>XXXXXXXXXXXXX</div><div class="line"><span class="tag">&lt;<span class="name">d</span> <span class="attr">style</span>=<span class="string">"clear:both"</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">通过margin和padding,overflow设置自适应并且登高的列.</div><div class="line">clear:both清除浮动引起的父元素坍塌.</div><div class="line"></div><div class="line">负边距的使用</div><div class="line">margin-top-left: 文档流位置发生变化,元素移动;</div><div class="line">margin-bottom-right: 元素不移动,下方,右方的元素移动;</div><div class="line">相对定位的top,left,right,bottom,元素移动,文档流位置不发生变化,还是占据原来的位置;</div></pre></td></tr></table></figure>
<h4 id="flex"><a href="#flex" class="headerlink" title="flex"></a>flex</h4><p><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071004.png" alt="flex"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div></pre></td><td class="code"><pre><div class="line">cross 垂直方向</div><div class="line">main 水平方向</div><div class="line">axis 轴</div><div class="line">box属性</div><div class="line">    flex-direction 主轴的方向</div><div class="line">        row 默认 水平左到右</div><div class="line">        row-reverse 水平右到左</div><div class="line">        column</div><div class="line">        colum-reverse</div><div class="line">    flex-wrap 一行排不下时换行规则</div><div class="line">        nowrap 默认,不换行</div><div class="line">        wrap 换行</div><div class="line">        wrap-reverse 换行,右下往上排</div><div class="line">    flex-flow 方向和换行的简写</div><div class="line">    justify-content 对齐规则</div><div class="line">        flex-start 默认 左对齐</div><div class="line">        flex-end 右对齐</div><div class="line">        center</div><div class="line">        space-between 两端对齐 项目中间间隔相等</div><div class="line">        space-around 两端对齐,项目中间间隔相等,两端有间隔,为中间间隔的一半</div><div class="line">    align-items 在垂直轴上的对齐方式</div><div class="line">        flex-start</div><div class="line">        flex-end</div><div class="line">        center</div><div class="line">        stretch 默认 拉伸-当未设置高度或auto</div><div class="line">        baseline 项目第一行文字基线对齐(文字底部)</div><div class="line">    align-content 也是垂直轴的对齐,多根轴线才会起作用</div><div class="line">        flex-start</div><div class="line">        flex-end</div><div class="line">        center</div><div class="line">        stretch</div><div class="line">        space-between</div><div class="line">        space-around</div><div class="line">item属性</div><div class="line">    order 排列顺序</div><div class="line">        flex-grow 放大比例 默认0(如果有多余位置)</div><div class="line">        flex-strink 缩小比例 默认1 如果位置不足,会缩小(如果位置不够用)</div><div class="line">        flex-basis 宽度</div><div class="line">        flex:放大缩小宽度的简写 auto(1,1,auto)|none(0,0,auto),或自定义</div><div class="line">        align-slef 用来覆盖align-items的值 默认auto,即继承父元素</div></pre></td></tr></table></figure>
<h3 id="meta"><a href="#meta" class="headerlink" title="meta"></a>meta</h3><p>•meta–元数据<br>元数据不显示到页面,但是对于设备和浏览器是可读的</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div></pre></td><td class="code"><pre><div class="line">***<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">""</span>&gt;</span></div><div class="line">***<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"将content属性关联到一个名称"</span> <span class="attr">content</span>=<span class="string">"属性"</span>&gt;</span></div><div class="line"></div><div class="line">SEO优化:</div><div class="line">1.keywords 关键字</div><div class="line">2.description 页面描述</div><div class="line">3.robots</div><div class="line"></div><div class="line"><span class="comment">&lt;!--</span></div><div class="line"></div><div class="line">all：文件将被检索，且页面上的链接可以被查询；</div><div class="line"></div><div class="line">none：文件将不被检索，且页面上的链接不可以被查询；</div><div class="line"></div><div class="line">index：文件将被检索；</div><div class="line"></div><div class="line">follow：页面上的链接可以被查询；</div><div class="line"></div><div class="line">noindex：文件将不被检索；</div><div class="line"></div><div class="line">nofollow：页面上的链接不可以被查询。</div><div class="line"></div><div class="line">--&gt;</div><div class="line"></div><div class="line">移动设备:</div><div class="line"></div><div class="line">4.viewport 移动窗口设定</div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0, user-scalable=no"</span>/&gt;</span></div><div class="line"></div><div class="line">5.伪装app 全屏离线使用</div><div class="line"></div><div class="line">name="app-mobile-web-app-capable" content="yes"</div><div class="line"></div><div class="line">6.隐藏,设置状态栏颜色--只有webapp下生效</div><div class="line"></div><div class="line">name="apple-mobile-web-app-status-bar-style" content="black/black-translucent/default"</div><div class="line"></div><div class="line">7.添加到主屏后的标题</div><div class="line"></div><div class="line">name="apple-mobile-web-app-title" content="标题"</div><div class="line"></div><div class="line">8.忽略数字自动识别成号码,忽略识别邮箱</div><div class="line"></div><div class="line">name="format-detection" content="telephone=no" /"email=no"</div><div class="line"></div><div class="line">9.添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner</div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"apple-itunes-app"</span> <span class="attr">content</span>=<span class="string">"app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"</span>&gt;</span></div><div class="line"></div><div class="line">10.其他</div><div class="line"></div><div class="line"><span class="comment">&lt;!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"HandheldFriendly"</span> <span class="attr">content</span>=<span class="string">"true"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- 微软的老式浏览器 --&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"MobileOptimized"</span> <span class="attr">content</span>=<span class="string">"320"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- uc强制竖屏 --&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"screen-orientation"</span> <span class="attr">content</span>=<span class="string">"portrait"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- QQ强制竖屏 --&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"x5-orientation"</span> <span class="attr">content</span>=<span class="string">"portrait"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- UC强制全屏 --&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"full-screen"</span> <span class="attr">content</span>=<span class="string">"yes"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- QQ强制全屏 --&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"x5-fullscreen"</span> <span class="attr">content</span>=<span class="string">"true"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- UC应用模式 --&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"browsermode"</span> <span class="attr">content</span>=<span class="string">"application"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- QQ应用模式 --&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"x5-page-mode"</span> <span class="attr">content</span>=<span class="string">"app"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- windows phone 点击无高光 --&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"msapplication-tap-highlight"</span> <span class="attr">content</span>=<span class="string">"no"</span>&gt;</span></div><div class="line"></div><div class="line">页面相关:</div><div class="line"></div><div class="line">1.</div><div class="line"></div><div class="line">***<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"将content属性关联到一个http头部"</span> <span class="attr">content</span>=<span class="string">""</span>&gt;</span></div><div class="line"></div><div class="line">1.expires(期限)</div><div class="line"></div><div class="line">说明:设置网页到期时间,到期后,必须到服务器重新传输;</div><div class="line"></div><div class="line">content="GTM时间格式"</div><div class="line"></div><div class="line">2.pragma(cache模式)</div><div class="line"></div><div class="line">说明:禁止浏览器从缓存中调阅页面--无法脱机使用</div><div class="line"></div><div class="line">content="no-cache"</div><div class="line"></div><div class="line">3.refresh(刷新)</div><div class="line"></div><div class="line">说明:自动刷新页面,并指向新页面</div><div class="line"></div><div class="line">content="x;URL=" x代表多少秒后跳转</div><div class="line"></div><div class="line">4.Set-Cookie(cookie设定)</div><div class="line"></div><div class="line">说明:如果网页过期,那么cookie也会被删除;</div><div class="line"></div><div class="line">content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/";</div><div class="line"></div><div class="line">5.Window-target(显示窗口的设定)</div><div class="line"></div><div class="line">说明:强制页面独立使用--禁止调入别的页面的框架里使用</div><div class="line"></div><div class="line">content="_top";</div><div class="line"></div><div class="line">6.content-Type(设置页面字符集)</div><div class="line"></div><div class="line">content="text/html;charset=utf-8"</div><div class="line"></div><div class="line">7.优先使用edge和chrome</div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge,chrome=1"</span> /&gt;</span></div><div class="line"></div><div class="line">或者<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=8"</span> &gt;</span>这样用,切换内核</div><div class="line"></div><div class="line">8.<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Cache-Control"</span> <span class="attr">content</span>=<span class="string">"no-siteapp"</span> /&gt;</span></div><div class="line"></div><div class="line">防止百度转码</div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"将content属性关联到一个http头部"</span> <span class="attr">content</span>=<span class="string">""</span>&gt;</span>`</div><div class="line"></div><div class="line">1.expires(期限)</div><div class="line"></div><div class="line">2.pragma(cache模式)</div><div class="line"></div><div class="line">3.refresh(刷新)</div><div class="line"></div><div class="line">4.Set-Cookie(cookie设定)</div></pre></td></tr></table></figure>
<p>•style<br>media属性–设置样式适用媒体 (是否没必要使用 局限性太大 没有移植性–直接在css文件中使用media)<br>•link–链接资源<br>可以用来加载图标到标题区域,也有media属性<br>•script<br>延迟脚本加载–defer<br>异步加载脚本–async 如果脚本不依赖顺序的执行 即与文档,其他脚本无关联 可以异步加载,例如收集客户数据.<br>•noscript</p>
<h3 id="hack与CDN"><a href="#hack与CDN" class="headerlink" title="hack与CDN"></a>hack与CDN</h3><p>ie兼容</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">gt大于 /gte 大于等于 /lt 小于 /lte 小于等于</div><div class="line"><span class="comment">&lt;!--[if lte IE8]&gt;</span></div><div class="line">ie8及以下可见</div><div class="line">&lt;![endif]--&gt;</div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="javascript"></span></div><div class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> jQuery == <span class="string">'undefined'</span>) &#123;</div><div class="line"><span class="built_in">document</span>.write(<span class="built_in">unescape</span>(<span class="string">"%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"</span>));</div><div class="line">&#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="动画效果"><a href="#动画效果" class="headerlink" title="动画效果"></a>动画效果</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">1.尽可能多的利用硬件能力，如使用3D变形来开启GPU加速</div><div class="line">-webkit-transform: translate3d(0, 0, 0);</div><div class="line">-moz-transform: translate3d(0, 0, 0);</div><div class="line">-ms-transform: translate3d(0, 0, 0);</div><div class="line">transform: translate3d(0, 0, 0);</div><div class="line">2.如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：</div><div class="line">-webkit-backface-visibility: hidden;</div><div class="line">-moz-backface-visibility: hidden;</div><div class="line">-ms-backface-visibility: hidden;</div><div class="line">backface-visibility: hidden;</div><div class="line"></div><div class="line">-webkit-perspective: 1000;</div><div class="line">-moz-perspective: 1000;</div><div class="line">-ms-perspective: 1000;</div><div class="line">perspective: 1000;</div><div class="line">3.如一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性</div><div class="line">4.尽可能少的使用box-shadows与gradients,往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧。</div><div class="line">5.尽可能的让动画元素不在文档流中，以减少重排</div><div class="line">position: fixed;</div><div class="line">position: absolute;</div></pre></td></tr></table></figure>
<h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><ul>
<li><p>关于选择器优先级</p>
<blockquote>
<p>js赋值 &gt; 标签内 &gt;  (内联样式表和外连的优先级同等) ID &gt; class &gt; 标签选择<br>其中 优先级大的,无视优先级小的串联,如id&gt;class.class同优先级的,串联多的优先 .class.class&gt;.class;</p>
</blockquote>
</li>
<li><p>将js在html末尾引入和加defer属性 是将js推迟到DOM加载完还是页面加载完?<br>全部加载完–<code>window.onload</code>,<code>$(window).load</code>,<code>defer</code>.<br>DOM加载完–<code>$(window).read</code>,<code>$(function(){ })</code>;</p>
</li>
</ul>
<h4 id="yahoo军规"><a href="#yahoo军规" class="headerlink" title="yahoo军规"></a>yahoo军规</h4><p>1.减少HTTP请求–合并css,js,图片;<br>2.利用CDN加速服务<br>3.Cache-control设置头文件过期或者静态缓存<br>4.启用Gzip压缩<br>5.css放顶部,使用户尽早看到网站完整样式<br>6.js尽量放在底部<br>7.避免css表达式<br>8.使用外联(如谷歌,百度的jquery文件),用户可能已经缓存<br>9.减少DNS查找<br>10.删除重复脚本<br>11.配置ETags<br>12.缓存AJax<br>13.尽早释放缓冲<br>14.用GET进行AJAX请求<br>15.延迟加载组件,如图片<br>16.预加载组件<br>17.减少DOM数量<br>18.跨域分离组件<br>19.减少iframe数量<br>20.no 404<br>21.减少cookie<br>22.对组件使用无cookie的域名<br>23.减少DOM访问次数<br>24.开发灵活的事件处理句柄<br>25.避免使用过滤器<br>26.css sprites–css精灵-多图组合<br>27.不使用缩放图<br>28.缓存icon<br>HTTP状态码<br>常见:<br>2XX 成功<br>3XX 重定向类<br>4XX 客户端错误<br>5XX 服务端错误<br>200 OK<br>301/302 重定向<br>404 未找到资源<br>501 服务器错误,无法提供服务</p>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/lh706.github.io/tags/总结/" rel="tag"># 总结</a>
          
            <a href="/lh706.github.io/tags/HTML/" rel="tag"># HTML</a>
          
            <a href="/lh706.github.io/tags/CSS/" rel="tag"># CSS</a>
          
        </div>
      

      
        
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/lh706.github.io/2017/05/20/AJAX-XML-JSON/" rel="next" title="AJAX,XML,JSON">
                <i class="fa fa-chevron-left"></i> AJAX,XML,JSON
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/lh706.github.io/2017/05/20/vue总结/" rel="prev" title="vue总结">
                vue总结 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/lh706.github.io/my.jpg"
               alt="Albert" />
          <p class="site-author-name" itemprop="name">Albert</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
           
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/lh706.github.io/archives">
                <span class="site-state-item-count">20</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/lh706.github.io/tags/index.html">
                <span class="site-state-item-count">11</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/lh706" target="_blank" title="GitHub">
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.zhihu.com/people/liang-da-shu-shu" target="_blank" title="知乎">
                  
                  知乎
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#目录结构"><span class="nav-number">1.</span> <span class="nav-text">目录结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#设备尺寸与分辨率"><span class="nav-number">2.</span> <span class="nav-text">设备尺寸与分辨率</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#尺寸"><span class="nav-number">2.1.</span> <span class="nav-text">尺寸</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#媒体查询"><span class="nav-number">2.2.</span> <span class="nav-text">媒体查询</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#布局相关"><span class="nav-number">3.</span> <span class="nav-text">布局相关</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#BFC与盒模型"><span class="nav-number">3.1.</span> <span class="nav-text">BFC与盒模型</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#float"><span class="nav-number">3.2.</span> <span class="nav-text">float</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#经典布局"><span class="nav-number">3.3.</span> <span class="nav-text">经典布局</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#flex"><span class="nav-number">3.4.</span> <span class="nav-text">flex</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#meta"><span class="nav-number">4.</span> <span class="nav-text">meta</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#hack与CDN"><span class="nav-number">5.</span> <span class="nav-text">hack与CDN</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#动画效果"><span class="nav-number">6.</span> <span class="nav-text">动画效果</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#其他"><span class="nav-number">7.</span> <span class="nav-text">其他</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#yahoo军规"><span class="nav-number">7.1.</span> <span class="nav-text">yahoo军规</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Albert</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Mist
  </a>
</div>


        

        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

  
  <script type="text/javascript" src="/lh706.github.io/lib/canvas-nest/canvas-nest.min.js"></script>


  


  <script type="text/javascript" src="/lh706.github.io/js/src/utils.js?v=5.1.1"></script>

  <script type="text/javascript" src="/lh706.github.io/js/src/motion.js?v=5.1.1"></script>



  
  

  
  <script type="text/javascript" src="/lh706.github.io/js/src/scrollspy.js?v=5.1.1"></script>
<script type="text/javascript" src="/lh706.github.io/js/src/post-details.js?v=5.1.1"></script>



  


  <script type="text/javascript" src="/lh706.github.io/js/src/bootstrap.js?v=5.1.1"></script>



  


  




	





  





  





  






  





  

  

  

  

  

</body>
</html>
